<template>
  <div>
    <div>
      <!-- 表格信息 -->
      <el-table :data="list"  height="200" stripe border style="width: 100%" @current-change="handleCurrentChange"
      @row-click="handleTableRow" highlight-current-row >
            <el-table-column prop="blightName" label="名称" width="180"></el-table-column>
            <el-table-column prop="host" label="寄主" width="180"></el-table-column>
            <el-table-column prop="blightHarm" label="主要危害" width="400"></el-table-column>
        </el-table>
      <div class="block" style="margin-top: 20px">
        <!-- 页码 -->
        <el-pagination small layout="prev, pager, next" :total="50" @current-change="change" @click="get()"></el-pagination>
        
      </div>
      <!-- 添加虫害按钮 -->
      <el-button type="text" @click="addForm = true">添加新虫害</el-button>
      <!-- 添加虫害弹窗 -->
      <el-dialog
        title="添加新虫害"
        :visible.sync="addForm"
        width="30%"
        :before-close="handleClose"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="addForm = false">取 消</el-button>
          <el-button type="primary" @click="addForm = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看虫害详细信息 -->
      <el-button type="text" @click="blightInfo = true">查看详细信息</el-button>
      <!-- 查看虫害详细信息弹窗 -->
      <el-dialog
        title="虫害详细信息"
        :visible.sync="blightInfo"
        width="30%"
        :before-close="handleClose"
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="blightInfo = false">取 消</el-button>
          <el-button type="primary" @click="blightInfo = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div>
      害虫名 <input type="text" /><br />
      寄主 <input type="text" /><br />
      <input type="button" value="查询" />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      addForm: false,
      blightInfo: false,
      blightId: "",
      blightName: "",
      host: "", // 寄主
      breedTime: "", //繁殖时间
      blightPredators: "", // 虫害天敌
      grubImg: "", //幼虫图片
      imagoImg: "", //成虫图片
      blightPrevention: "", //防治措施
      blightHarm: "", //危害
      pageNO: "",
      pages: "",
      list: [],
      blightParam: { pageNO: "1", pageSize: "2", blightName: "", host: "" },
    };
  },
  methods: {
    ...mapMutations("blight","[setBlightParam]"),
    async findByItem() {
      let list = await this.ajax.getSubmit(
        "/api/blight/findByItem",
        this.blightParam
      );
      this.list = list.records;
    },
    changePageNO(pageNO){
        let paramObj = this.blightParam;
        paramObj.pageNO = pageNO;
        this.setBlightParam(paramObj);
        this.findByItem;
    },
    get(){
        let paramObj = this.blightParam;
        paramObj.blightName = this.blightName;
        paramObj.host = this.host;
        this.setBlightParam(paramObj);
        this.findByItem;
    },
    change(index){
        console.log(`${index}`)
        this.pageNO = index;
        console.log(this.pageNO)
        this.changePageNO(this.pageNO)
    },
    handleTableRow(row) {
      console.log(row.blightId);
      this.blightId = row.blightId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>

</style>
